<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>老师筛选</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/filter.css">
    <style>

    </style>
</head>

<body>
    <div class="header">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo">
                	<a href="index.html">
                		<img src="public/images/sdk_logo.jpg" alt="">
                	</a>
                </div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side">
                <!-- <input class="search-bar hide" type="text"><span class="inline-block search-btn"></span> -->
            </div>
        </div>
    </div>
    <div class="contact-body">
        <!-- 内容引导 -->
        <div class="content-boot">
            <div class="row">
                <div class="content-title">名师资料</div>
                <div class="content-explain">
                    <ul class="content-ul" id="J_content-explain"></ul>
                </div>
            </div>
            <div class="row">
                <div class="filter-container">
                    <div class="filter-status" id="J_filter_condition">
                        <span>全部</span>
                    </div>
                    <div class="filter-teacher-status">
                        <span class="filter-teacher-head">老师状态</span>
                        <span class="status" data-type="alias" data-status="true">使用化名</span>
                        <span class="status" data-type="certificate" data-status="true">证书审核</span>
                        <span class="status" data-type="customization" data-status="true">私人订制</span>
                        <span class="status" data-type="realName" data-status="true">实名认证</span>
                        <span class="status" data-type="educationalBackground" data-status="true">学历认证</span>
                        <!-- <span class="status" data-type="onlineDisplay" data-status="true">上线展示</span> -->
                    </div>
                    <div class="filter-teacher-opts">
                        <span class="filter-opts-head">排序指标</span>
                        <span class="filter-opts current-opts" data-opts="SENTIMENT">人气</span>
                        <span class="filter-opts" data-opts="CORRECT5">平均战绩</span>
                        <span class="filter-opts" data-opts="CORRECT1">上期战绩</span>
                        <span class="filter-opts" data-opts="EXCEPTIONAL">打赏次数</span>
                        <span class="filter-opts" data-opts="CONTRIBUTE">发稿次数</span>
                    </div>
                    <div class="teacher-list" id="J_teacher_list">

                    </div>
                </div>
            </div>
        </div>
        <!-- 预约教师 -->
        <div class="appointment"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <!-- 下载报告 -->
    <script id="J_teacher_list_tpl" type="text/html">
        <ul class="teacher-lists">
        {{# d.list.forEach(function(val,index){ }}
            <li>
                <div class="teacher-item">
                    <div class="inline-block teacher-info">
                        <div class="teacher-icon"><img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="" class="avator"></div>
                        <h4 class="teacher-name">{{val.base.aliasName?val.base.aliasName:val.base.name}}</h4>
                        <div class="teacher-info-item">打赏人数
                            <p>{{val.extend.exceptionalNumber}}</p>
                        </div>
                        <div class="teacher-info-item">人气指数
                            <p>{{val.extend.sentiment}}</p>
                        </div>
                    </div>
                    <div class="inline-block score-info">
                        <div class="score">前5期战绩:
                            <p>{{formatVal(val.correct5)}}%</p>
                        </div>
                        <div class="score">上期战绩:
                            <p>{{formatVal(val.correct1)}}%</p>
                        </div>
                        <p>
                           	 本期研究板块：<br>
                            {{formatVal(val.extend.nowContent, "")}}
                        </p>
                    </div>
                </div>
                <div class="reward-btn" data-id="{{val.userId}}">打赏本期</div>
            </li>
        {{# }); }}
        </ul>
        {{# if(d.count > d.pageSize){ }}
        <div class="reward-pagination">
            <span class="switch-btn pre-btn" data-btn="pre">&lt;</span>
            <div class="inline-block pages">
                {{# for(var i = 1; i < d.count/d.pageSize + 1; i++){ }}
                    <div class="page {{# if(i ==1 ){ }}current-page{{# }; }}" data-page="{{i}}">{{i}}</div>
                {{# }; }}
            </div>
            <span class="switch-btn next-btn" data-btn="next">&gt;</span>
        </div>
        {{# }; }}
    </script>
    <!-- 老师资料 -->
    <div class="teacher-infos" id="teacherInfoLayer">
        <div class="teacherInfo-layer-head">老师资料</div>
        <div class="teacherInfo-layer-body" id="J_teacher_info"></div>
    </div>
    <script id="J_teacher_info_tpl" type="text/html">
        <div class="teacher-layer-status">
            <div class="inline-block teacher-layer-icon">
                <img src="{{G.defaultAvator}}" alt="{{d.base.name}}" class="avator" data-lazyload-img="{{G.uploadurl}}/avator/{{d.userId}}.png">
            </div>
            <div class="inline-block">
                <div class="teacher-layer-name">{{d.base.aliasName?d.base.aliasName:d.base.name}}<span class="teacher-layer-label">{{d.base.teacherType}}/{{formatVal(d.base.educationalBackgroundValue)}}</span></div>
                <div class="teacher-layer-tag">
                   <!--  <span class="tag-span">证券从业资格证</span>
                    <span class="tag-span">本科学历</span>
                    <span class="tag-span">从业十年</span>
                    <span class="tag-span">老司机</span> -->
                </div>
            </div>
            <div class="inline-block teacher-layer-score">
                <p>前5期战绩：<span class="correct correct1">{{formatVal(d.correct5)}}%</span></p>
                <p>上期战绩：<span class="correct correct5">{{formatVal(d.correct1)}}%</span></p>
            </div>
        </div>
        <div class="teacher-layer-info">
            <ul>
                <li>年龄：{{formatVal(d.user.age)}}</li>
                <li>关注人数：{{d.extend.attentionNumber}}</li>
                <li>累计发表报告：{{d.extend.contributeNumber}}篇</li>
                <li>性别：{{genderShow(d.user.gender)}}</li>
                <li>从业时间：{{d.base.jobTime ? new Date(d.base.jobTime).format("YYYY-mm") : "-"}}</li>
                <li>累计获得打赏：{{d.extend.exceptionalMoney}}元</li>
            </ul>
            {{# if (G.getCookie("sdk_user_type") == "USER" && G.getCookie("sdk_user_id")) {}}
                <input type="button" class="teacher-layer-focus {{# if(!d.attentioned){ }}hide{{# } }}" id="J_off_attention" data-teacherid="{{d.userId}}" value="取消关注"> 
                <input type="button" class="teacher-layer-focus {{# if(d.attentioned){ }}hide{{# } }}" id="J_attention" data-teacherid="{{d.userId}}" value="+ 关注TA">
            {{# }; }}
        </div>
        <div class="recent-reports">
            <h2>最近发表的报告：</h2>
            <ul class="teacher-layer-reports" id="J_recent_report"></ul>
        </div>
        <div class="recommend-reports">
            <h2>精品推荐：</h2>
            <ul class="teacher-layer-reports-recommend" id="J_recommend_report"></ul>
        </div>
    </script>
    <script id="J_reports_tpl" type="text/html">
        {{# if(d.length){ }}
            {{# d.forEach(function(val,index){ }}
            <li class="product-list">
                <p class="report-time" title="{{val.title}}">{{val.title}}</p>
                <p>发布时间：</p>
                <p class="tac">{{new Date(val.createTime).format('YYYY-MM-DD')}}</p>
                <p class="tac">下载量：<i>{{val.downloadNumber}}</i></p>
                {{# if (val.free) { }}
                    <a class="report-download down-free" data-id="{{val.productId}}">免费下载</a>
                {{# } else if (val.payed) { }}
                    <a class="report-download down-free" data-id="{{val.productId}}">下载</a>
                {{# } else { }}
                    <div class="report-download J_buy_product" data-id="{{val.productId}}">打赏{{val.promotionsPrice}}</div>
                {{# } }}
            </li>
            {{# }); }}
        {{# }else{ }}
            <li class="tac"><img src="public/images/sdk_no_content.png" alt="暂无内容"></li>
        {{# }; }}
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/product.js"></script>
    <script src="public/js/productOrder.js"></script>
    <script src="public/js/rechargeApi.js"></script>
    <script src="public/js/rechargeOrder.js"></script>
    <script src="public/js/teacher.js"></script>
    <script src="public/js/attention.js"></script>
    <script src="public/js/public.js"></script>
    <script>
	contentGuideApi.getOne("老师筛选", function(data){
	    var html = "";
	    for (var i = 0; i < data.length; i++) {
	        var value = data[i].value;
	        html += "<li>" + (i + 1) + "、" + value + "</li>";
	    }
	    $("#J_content-explain").html(html);
	})
	
    var teacherParams = {
        count: 0,
        pageId: 1,
        pageSize: 8,
        orderRule: 'SENTIMENT'
    };
    function getTeacherList(params){
        teacher.getList(params,function(data){
            console.log(data)
            laytpl($('#J_teacher_list_tpl').html()).render(data,function(html){
                $('#J_teacher_list').html(html)
            })
            teacherParams.count = data.count;
            $('.current-page').removeClass('current-page');
            $('.page[data-page="'+teacherParams.pageId+'"]').addClass('current-page');
            lazyload()
        })
    }
    getTeacherList(teacherParams)

    //排序指标
    $(document).on('click','.filter-opts',function(){
        if(!$(this).hasClass('current-opts')){
            $(this).addClass('current-opts');
            $(this).siblings('.current-opts').removeClass('current-opts')
        }
        var opts = $(this).data('opts')
        teacherParams.orderRule = opts;
        getTeacherList(teacherParams)
    })

    //清空筛选条件
    $(document).on('click','.filter-condition i',function(){
        var type = $(this).parent('.filter-condition').data('type');
        $(this).parent('.filter-condition').remove();
        delete teacherParams[''+type+''];
        getTeacherList(teacherParams)
    })

    //老师状态
    $(document).on('click','.status',function(){
        var type = $(this).data('type');
        var status = $(this).data('status');
        var html = $(this).html();
        console.log(type,status,html)
        var str = ' <span class="filter-condition" data-type="'+type+'" data-status="'+!status+'">'+html+'<i>x</i></span>'
        if(!teacherParams[''+type+'']){
            teacherParams[''+type+''] = status;
            $('#J_filter_condition').append(str)
        }else{
            delete teacherParams[''+type+''];
            $('#J_filter_condition').append(str)
            $('.filter-condition[data-type='+type+']').remove();
        }
        getTeacherList(teacherParams)
    })

    $(document).on("click", "#J_attention", function() {//关注
        var id = $(this).attr("data-teacherid");
        attentionApi.put(id, function() {
            $("#J_attention").addClass("hide");
            $("#J_off_attention").removeClass("hide");
            layer.msg("关注成功")
        })
    }).on('click','#J_off_attention',function(){//取消关注
        var id = $(this).attr("data-teacherid");
        attentionApi.delete(id,function(){
            $("#J_attention").removeClass("hide");
            $("#J_off_attention").addClass("hide");
            layer.msg('取消关注成功')
        })
    }).on("click", ".J_buy_product", function() {//点击支付需要根据id查询一次产品 然后调用openPayLayer支付弹窗，复制以下代码即可
        var id = $(this).attr("data-id");
        openPayLayer(id,'打赏已取消')
    })
    //获取某个老师的信息
    function teacherLayer(userId) {
        layer.load(1)
        teacher.findOne(userId, {}, function(data) {
            laytpl($('#J_teacher_info_tpl').html()).render(data, function(html) {
                $('#J_teacher_info').html(html)
            })
            lazyload()
            reports(userId, '#J_recent_report', false);
            reports(userId, '#J_recommend_report', true);
            layer.closeAll()
            layer.open({
                area: ['800px', '760px'],
                title: false,
                closeBtn: 0,
                shadeClose: true,
                type: 1,
                scrollbar: false,
                content: $('#teacherInfoLayer')
            })
        })
    }
    //获取老师报告
    function reports(userId, dom, quintessence) {
        product.getList({
            teacherId: userId,
            pageSize: 5,
            quintessence: quintessence
        }, function(data) {
            laytpl($('#J_reports_tpl').html()).render(data.list, function(list) {
                $(dom).html(list)
            })
        })
    }

    $(document).on('click', '.reward-btn', function() {
        var userId = $(this).data('id');
        teacherLayer(userId)
    })
    // $(document).on('click','.page',function(){
    //     $(this).siblings('.current-page').removeClass('current-page')
    //     console.log($(this).data('page'))
    //     console.log(teacherParams)
    //     var pageId = $(this).data('page');
    //     teacherParams.pageId = pageId;
    //     getTeacherList(teacherParams)
    //     $('.page[data-page="'+pageId+'"]').addClass('current-page');
    // })
    //分页
    $(document).on('click','.page',function(){
        if(!$(this).hasClass('current-page')){
            $(this).addClass('current-page')
            teacherParams.pageId = $(this).data('page');
            getTeacherList(teacherParams)
        }
        
    })
    $(document).on('click','.switch-btn',function(){
        var btn = $(this).data('btn');
        var pageId = parseInt($(this).siblings('.pages').find('.current-page').data('page'));
        switch (btn) {
            case 'pre':
                if(pageId > 1){
                    teacherParams.pageId = pageId - 1;
                    getTeacherList(teacherParams)
                }
                break;
            case 'next':
                if(pageId < Math.ceil(teacherParams.count/teacherParams.pageSize)){
                    teacherParams.pageId = pageId + 1
                    getTeacherList(teacherParams)
                }
                break;
        }
    })
    </script>
</body>

</html>
